﻿<!DOCTYPE html>

<html>
<head>

    <link href="~/Content/styles/LeSoft-ui.css" rel="stylesheet" />
    <link href="~/Content/scripts/bootstrap/bootstrap.min.css?v=3.3.6" rel="stylesheet" />
    <link href="~/Content/styles/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/styles/plugins/iCheck/custom.css" rel="stylesheet" />
    <link href="~/Content/scripts/plugins/fullcalendar/css/fullcalendar.css" rel="stylesheet" />
    <link href="~/Content/styles/anitmate.css" rel="stylesheet" />
    <link href="~/Content/styles/style.css?v=4.1.0" rel="stylesheet" />
    <script src="~/Content/scripts/plugins/fullcalendar/js/jquery-1.7.2.min.js"></script>
    <script src="~/Content/scripts/jquery/jquery-ui.custom.min.js"></script>
    <script src="~/Content/scripts/plugins/fullcalendar/js/fullcalendar.min.js"></script>
    <script src="~/Content/scripts/jquery/icheck.min.js"></script>
    <script src="~/Content/scripts/utils/LeSoft-ui.js"></script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });

            $('#external-events div.external-event').each(function () {
                var eventObject = {
                    title: $.trim($(this).text())
                };
                $(this).data('eventObject', eventObject);
                $(this).draggable({
                    zIndex: 999,
                    revert: true,
                    revertDuration: 0
                });
            });

            /* initialize the calendar
             -----------------------------------------------------------------*/
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next,saveall',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                buttonText: {
                    prev: '上一页',
                    next: '下一页',
                    saveall: '保存',
                    month: '月视图',
                    week: '周视图',
                    day: '日视图'
                },
                titleFormat: "yyyy年MM月",
                columnFormat: {
                    month: 'ddd',
                    week: 'MM月dd日 ddd',
                    day: 'MM月dd日 ddd'
                },
                editable: true,
                droppable: true,
                drop: function (date, allDay) {
                    var originalEventObject = $(this).data('eventObject');
                    var copiedEventObject = $.extend({}, originalEventObject);
                    copiedEventObject.start = date;
                    copiedEventObject.allDay = allDay;
                    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
                    //if ($('#drop-remove').is(':checked')) {
                    //    $(this).remove();
                    //}
                },
                //events: (function () {
                //    var _data = [];
                //    $.ajax({
                //        url: "/DailyEventManage/Schedule/GetList",
                //        type: "get",
                //        dataType: "json",
                //        async: false,
                //        success: function (data) {
                //            _data = data;
                //        }
                //    });
                //    return _data;
                //})(),
                events: [
                    {
                        title: '日事件',
                        start: new Date(y, m, 1),
                        backgroundColor: 'red',
                        borderColor: 'red',
                        textColor:'#fff'
                        
                    },
                    {
                        title: '长事件',
                        start: new Date(y, m, d - 5),
                        end: new Date(y, m, d - 2),
                        textColor: '#000'

                      
                    },
                    {
                        id: 999,
                        title: '重复事件',
                        start: new Date(y, m, d - 3, 16, 0),
                        allDay: false,                    
                       textColor: '#000'
                    },
                    {
                        id: 999,
                        title: '重复事件',
                        start: new Date(y, m, d + 4, 16, 0),
                        allDay: false,
                        textColor: '#000'
                    },
                    {
                        title: '会议',
                        start: new Date(y, m, d, 10, 30),
                        allDay: false,
                        textColor: '#000'
                    },
                    {
                        title: '午餐',
                        start: new Date(y, m, d, 12, 0),
                        end: new Date(y, m, d, 14, 0),
                        allDay: false,
                        textColor: '#000'
                    },
                    {
                        title: '生日',
                        start: new Date(y, m, d + 1, 19, 0),
                        end: new Date(y, m, d + 1, 22, 30),
                        allDay: false,
                        textColor: '#000'
                    },
                    {
                        title: '打开百度',
                        start: new Date(y, m, 28),
                        end: new Date(y, m, 29),
                        url: 'http://baidu.com/',
                        textColor: '#000'
                    }
                ],
                eventClick: function (event, element) {
                    dialogOpen({
                        id: "Form",
                        title: '查看日程',
                        url: '/DailyEventManage/Schedule/Form?keyValue=' + event.id,
                        width: "500px",
                        height: "450px",
                        btn: null,
                        callBack: function (iframeId) {
                            top.frames[iframeId].AcceptClick();
                        }
                    });
                }
            });

            $('#calendar').find('.fc-button-saveall').click(function () {
                alert('select')
            })

        });

        //添加日程
        function btn_add(date, time) {
            dialogOpen({
                id: "Form",
                title: '添加日程',
                url: '/DailyEventManage/Schedule/Form?startDate=' + escape(date) + '&startTime=' + time,
                width: "500px",
                height: "450px",
                btn: null,
                callBack: function (iframeId) {
                    top.frames[iframeId].AcceptClick();
                }
            });
        }
    </script>
 </head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row animated fadeInDown">
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>项目</h5>
                        @*<div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="calendar.html#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li>
                                        <a href="calendar.html#">选项1</a>
                                    </li>
                                    <li>
                                        <a href="calendar.html#">选项2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>*@
                    </div>
                    <div class="ibox-content">
                        <div id='external-events'>
                            <p>可拖动的项目</p>
                            <div class='external-event navy-bg'>确定活动目标</div>
                            <div class='external-event navy-bg'>各部门职责及分工</div>
                            <div class='external-event navy-bg'>案例分享</div>
                            <div class='external-event navy-bg'>xxx</div>
                            <div class="hr-line-dashed"></div>
                            <button class="btn btn-primary btn-block" onclick="btn_add()">新增项目</button>
                            <div class="hr-line-dashed"></div>
                            @*<p class="m-t">
                                    <input type='checkbox' id='drop-remove' class="i-checks" checked />
                                    <label for='drop-remove'>移动后删除</label>
                                </p>*@
                        </div>
                    </div>
                </div>
                @*<div class="ibox float-e-margins">
                    <div class="ibox-content">

                    </div>
                </div>*@
            </div>
            <div class="col-sm-10">
                <div class="ibox float-e-margins">
                 
                    <div class="ibox-content">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>